葡萄藤PPT

【CSS-task3】

小课堂【上海第2期】

CSS选择器，以及选择器的优先级如何计算

分享人：刘洪利

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

什么是CSS选择器？

在HTML页面中,如果我们想要去改变一个元素的字体大小、尺寸、颜色、样式等

就需要用到Css选择器来进行对修改元素一对一或者多对一的进行匹配并改变其样式

这就是css选择器

2.知识剖析

选择器的类型

选择器的类型有元素选择器、类选择器、ID选择器、后代选择器、伪类选择器、通用选择器、相邻同胞选择器以及属性选择器

下面会挨个为大家简单介绍一下

1.元素选择器：元素选择器通常会是选择某个HTML元素，如p、a甚至可以是html本身。

而且元素选择器会匹配到HTML页面中被选择器选中元素的页面中的全部元素。

					
                        p{color:yellow;}
			html{color:black;}

2.类选择器：通过给样式前面加一个点号"."来进行表示。

类选择器可以应用样式而不用考虑其他被涉及的原色.

					
                        .red{color:red}

3.ID选择器: ID选择器通常是由一个#字符表示

					
                        #card{background-color:green}

4.后代选择器: 后代选择器是通过元素之间的父子关系来进行选择.比如说在一个div中有一个子级p元素,除了使用元素选择器或者类选择器以外还可以通过下图的这种方式进行选择.
这样就会可以把div中所有的子级p元素统统字体加粗.

					
                        div p{font-weight:bold}

5.伪类选择器有时候我们会需要根据文档结构之外的其他条件对元素应用样式，譬如表单元素或者链接的状态这就需要使用伪类选择器来完成

				
                    a:hover{color:black}

6.通用选择器通用选择器可能是所有选择器中最强大却最少使用的，通用选择器的作用就像是通配符，它可以匹配所有可用的元素。起作用主要在实际中的使用是删除每个元素上默认的浏览器内外边距。通过*号来表示

				
                	*{margin: 0;padding: 0;}

7.相邻同胞选择器 [h2 + p]

相邻同胞选择器可用于定位同一个父元素下某个元素之后相邻的元素

8.属性选择器
它可以根据元素的属性和属性值来选择元素
比如要选择HTML页面中有class属性(值不限)的div元素,使其margin-left:10px.

				 
                   div[class] {margin-left: 10px}

3.常见问题

问题: 对多个选择器使用的优先级是怎么进行计算的？如何合理的使用类型选择器？

4.解决方案

根据按照官方的表述，css优先级如下：
通用选择器（*） < 元素(类型)选择器 < 类选择器 < 属性选择器 < 伪类 < ID 选择器 <内联样式
但是当如果同时有几个选择器规则应用在同一个元素上，我想最终要的那条优先级又比其他的比较低,这时,我们就可以使用重要声明!important来强制应用这条样式

5.编码实战

6.扩展思考

问题:子选择器和后代选择器的区别？

7.参考文献

《Css权威指南》

css权重及！important-------林中路博客

8.更多讨论

讨论点一：在选择器的样式中添加“!important”后的优先级是如何筛选的？

鸣谢

感谢大家观看

BY :刘洪利